<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="药 品 价 格 查 询">
      <mt-button icon="back" @click="goBack('search')" slot="left"
        >返回</mt-button
      >
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 搜索 -->
      <div class="search">
        <!-- 搜索 -->
        <van-search
          v-model="searchTxt"
          background="#81ecec"
          shape="round"
          show-action
          placeholder="搜索诊疗项目"
          @search="goSearch"
          @clear="onCancel"
          @cancel="onCancel"
        />
      </div>

      <!-- 列表区域 -->
      <van-cell-group>
        <van-cell
          v-for="(item, index) in drugList"
          :key="index"
          :title="item.name"
          :value="'价格：' + item.sellingPrice + '￥'"
          :label="'类型：' + item.typeId == 5 ? '西药' : '中药'"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "drugsSearch",

  data() {
    return {
      searchTxt: "", //搜索的文本内容
      drugList: [],
    };
  },

  mounted() {},

  created() {
    this.getDrugList();
  },

  methods: {
    goBack(index) {
      this.$router.push({
        path: "./index",
        query: { index },
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //按下enter调用搜索接口
    goSearch() {
      this.$http
        .get("drug/page", {
          params: {
            pageSize: 100,
            pageNum: 1,
            name: this.searchTxt,
          },
        })
        .then((res) => {
          this.drugList = res.data.data.records;
        });
    },
    //搜索取消
    onCancel(){
      this.getDrugList()
    },
    //获取药品信息
    getDrugList() {
      this.$http
        .get("drug/page", {
          params: {
            pageSize: 100,
            pageNum: 1,
          },
        })
        .then((res) => {
          console.log(res);
          this.drugList = res.data.data.records;
        });
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  background-color: #fff;
  .listInner {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .innerLeft {
      font-size: 14px;
      line-height: 20px;
      p:nth-child(4) {
        color: #ff9f43;
      }
    }
    .innerRight {
      flex: 1;
      text-align: right;
      color: #3498db;
    }
  }
}
</style>